<template>
  <n-modal
    v-model:show="modalVisible"
    transform-origin="center"
    display-directive="if"
    class="h-100vh"
    preset="card"
    size="small"
    :auto-focus="false"
    :bordered="false"
    :mask-closable="false"
    :close-on-esc="false"
    @after-enter="if (!newBill) goBill(0);"
  >
    <template v-if="modalVisible" #header>
      <n-space :size="[0, 0]" align="center" :wrap-item="false">
        <n-text class="w-260px">编辑：{{ billNo }}</n-text>
        <n-button-group v-if="!newBill" size="tiny">
          <n-button ghost class="pr-10px" :disabled="isBegin" @click="goBill(-1)"><icon-mdi:menu-left />前笔</n-button>
          <n-button ghost class="pl-10px" :disabled="isEnd" @click="goBill(1)">后笔<icon-mdi:menu-right /></n-button>
        </n-button-group>
      </n-space>
    </template>
    <div class="tiny-list h-full">
      <n-card class="h-full shadow-sm rounded-16px" size="small">
        <template #header>
          <purchase-detail />
        </template>
        <n-tabs type="line" :tabs-padding="100" style="height: 100%" pane-style="padding-top: 0; height: 100%">
          <template #suffix>
            <detailed-export-btn />
          </template>
          <n-tab-pane name="结算明细" display-directive="show" tab="结算明细">
            <settlemen-detailed />
          </n-tab-pane>
          <n-tab-pane name="扣款项目" display-directive="show" tab="扣款项目">
            <deduction-items />
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useBillContext } from '@/context';
import PurchaseDetail from './components/PurchaseDetail.vue';
import SettlemenDetailed from './components/SettlemenDetailed.vue';
import DeductionItems from './components/DeductionItems.vue';
import DetailedExportBtn from './components/DetailedExportBtn.vue';

export interface Props {
  /** 弹窗可见性 */
  visible: boolean;
}

const { useInject } = useBillContext();
const { billNo, newBill, tableData, setBillNo, setBillStatus, setTableData } = useInject();

const props = withDefaults(defineProps<Props>(), {
  visible: false
});

interface Emits {
  (e: 'update:visible', visible: boolean): void;
}
const emit = defineEmits<Emits>();
const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible) {
    emit('update:visible', visible);
  }
});

// 处理前后笔按钮状态，根据数组位置判断第一笔和最后笔按钮是否禁用
const isBegin = ref(false);
const isEnd = ref(false);
function goBtnStatus(arrIndex: number, arrSize: number) {
  isBegin.value = arrIndex === 0;
  isEnd.value = arrIndex === arrSize - 1;
}

// 处理前后笔跳转
const goNo = ref(0);
function goBill(n: number) {
  // 暴露监听参数
  goNo.value = n;

  // 从上下文中获取当前 表格数据、表格行数、表格页数
  const { pageData, pageSize, pageIndex, arrSize } = tableData.value;

  if (pageSize && pageIndex && arrSize) {
    // 从上下文中获取当前项ID
    const id = billNo.value;

    // 从上下文中获取表格当前项的ID和状态并转换成数组
    const ids = pageData.map((v: any) => v[0]);
    const status = pageData.map((v: any) => v[1]);

    // 当前项在表格中位置
    const rowIndex = ids.indexOf(id);

    // 获得前笔位置
    const newIndex = rowIndex + n;

    // 根据表格位置设置新的ID和状态
    setBillNo(ids[newIndex]);
    setBillStatus(status[newIndex]);

    // 根据表格位置计算当前项在整个数组中位置，如果直接点开需要取当前项的位置
    const arrIndex = pageSize * (pageIndex - 1) + (n === 0 ? rowIndex : newIndex);

    // 按钮是否禁用
    goBtnStatus(arrIndex, arrSize);

    // 如果当前项是最后或最前时，对列表进行翻页
    if ((newIndex === -1 && arrIndex !== 0 && n === -1) || (newIndex === ids.length && arrIndex !== arrSize - 1)) {
      setTableData({ pageIndex: pageIndex + n });
    }
  }
}

// 处理前后笔跳转 无翻页
// function goBill(n: number) {
//   // 从上下文中获取当前 表格数据、表格行数、表格页数
//   const { pageData, pageSize, pageIndex } = tableData.value;

//   if (pageSize && pageIndex) {
//     // 从上下文中获取当前项ID
//     const id = billNo.value;

//     // 从上下文中获取表格当前项的ID和状态并转换成数组
//     const ids = pageData.map((v: any) => v[0]);
//     const status = pageData.map((v: any) => v[1]);

//     // 当前项在表格中位置
//     const rowSize = ids.length;
//     const newIndex = ids.indexOf(id) + n;

//     // 根据表格位置设置新的ID和状态
//     const newId = ids[newIndex];
//     const newStatus = status[newIndex];
//     setBillNo(newId);
//     setBillStatus(newStatus);

//     // 判断第一笔和最后笔按钮是否禁用
//     isBegin.value = newIndex === 0;
//     isEnd.value = newIndex === rowSize - 1;
//   }
// }

watch(
  () => tableData.value.pageData,
  newData => {
    if (newData) {
      const ids = newData.map((v: any) => v[0]);
      const id = goNo.value === -1 ? ids.pop() : ids.reverse().pop();
      setBillNo(id);
    }
  }
);
</script>

<style scoped>
:deep(.n-tabs-wrapper) {
  padding-right: 30px;
}
</style>
